<template>
    <div id="book-comment">
        <el-card class="box-card" v-for="(item, index) in tableData" :key="index">
            <div slot="header" class="clearfix">
                <span>{{ item[0].name }}</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="infoBtn(item[0].bookId)">详情</el-button>
            </div>
            <div v-for="o in item.slice(0,3)" :key="o.id" class="text item">
                <div>{{ o.comment }}</div>
            </div>
            <div v-if="item.length > 3">...</div>
        </el-card>
    </div>
</template>

<script>
import { commentList, commentInfo} from '@/api/comment'
export default {
    methods: {
        // 获取信息api
        getList(params) {
            this.loading = true;
            let objParams = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            }

            commentList(objParams).then(res => {
                this.loading = false;
                const { data } = res
                this.totalRecord = data;
                this.tableData = data;
            }).catch(error => {
                reject(error)
            })
        },
        infoBtn(id){
            this.$router.push({
                path: "/book/comment_info",
                query: { id: id }
            });
        }
    },
    created() {
        this.getList()
    },
    data() {
        return {
            loading: false,
            totalRecord: null,
            tableData: [],
            pageNum: 1,
            pageSize: 10,
        }
    }
}
</script>

<style  lang="scss" scoped>
#book-comment {
    padding: 20px;

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 48%;
        display: inline-block;
        margin-right: 20px;
    }
}
</style>